<script setup>

import {onMounted, ref} from "vue";
import NodeInfo from "@/views/topology/components/RightBar/NodeInfo.vue";
import SysInfo from "@/views/topology/components/RightBar/SysInfo.vue";
import {useMeta2dStore} from "@/views/topology/utils/meta2dStore";

const store = useMeta2dStore()
const active = ref([]);
const activeName = ref('first');

onMounted(() => {
    active.value = store.active
})

store.$subscribe((mutation, state) => {
    active.value = state.active
})
</script>

<template>
    <el-aside width="250px" style="border-left: #ccc 1px solid;margin-right: 0.5%">
        <el-tabs v-model="activeName" style="margin-left: 5%">
            <el-tab-pane name="first" label="系统信息">
                <SysInfo/>
            </el-tab-pane>
            <el-tab-pane name="second" label="节点信息" :lazy="true">
                <template v-if="active.length===1">
                    <NodeInfo />
                </template>
                <template v-else>
                    <el-text type="info">请选中一个组件后再查看</el-text>
                </template>
            </el-tab-pane>
        </el-tabs>
    </el-aside>
</template>

<style scoped>
</style>